<template>
  <el-container style="height: 100%; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu default-active="2" class="el-menu-vertical-demo">
        <el-menu-item index="2" @click="book_recfun()">
          <i class="el-icon-menu"></i>
          <span slot="title">图书推荐</span>
        </el-menu-item>
        <el-menu-item index="3" @click="book_borfun()">
          <i class="el-icon-document"></i>
          <span slot="title">借书</span>
        </el-menu-item>
        <el-menu-item index="4" @click="book_feefun()">
          <i class="el-icon-setting"></i>
          <span slot="title">缴费</span>
        </el-menu-item>

        <el-menu-item index="5" @click="library_cardfun()">
          <i class="el-icon-setting"></i>
          <span slot="title">借阅证管理</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="text-align: right;">
        <appbar></appbar>
      </el-header>
      <el-main>
        <!-- 借书 -->
        <v-card><borrow_shows v-if="borrow_show" style="margin-left: 10px;"></borrow_shows></v-card>
        
        <!-- 图书推荐 -->
        <v-card><book_rec v-if="book_recshow"></book_rec></v-card>
        <!-- 缴费 -->
        <v-card><book_fee v-if="book_feeshow"></book_fee></v-card>
        <!-- 借阅证 -->
        <library-card v-if="library_cardshow"></library-card>
      </el-main>
    </el-container>
  </el-container>
</template>
  
<script>
import appbar from "../components/app-bar.vue";
import tablemanage from "../components/table/tablemanage.vue";
import book_rec from "../views/book_rec.vue";
import book_fee from "../views/book_fee.vue";
import LibraryCard from "../views/borrow_card.vue";
import borrow_shows from "../views/borrow_show.vue";
export default {
  name: "main",
  components: {
    appbar: appbar,
    tablemanage: tablemanage,
    book_rec,
    book_fee,
    LibraryCard,
    borrow_shows,
  },
  methods: {
    book_borfun() {
      this.borrow_show = true;
      this.book_feeshow = false;
      this.book_recshow = false;
      this.library_cardshow = false;
    },
    book_feefun() {
      this.borrow_show = false;
      this.book_feeshow = true;
      this.book_recshow = false;
      this.library_cardshow = false;
    },
    library_cardfun() {
      this.borrow_show = false;
      this.book_feeshow = false;
      this.book_recshow = false;
      this.library_cardshow = true;
    },
    book_recfun() {
      this.borrow_show = false;
      this.book_feeshow = false;
      this.book_recshow = true;
      this.library_cardshow = false;
    },
  },
  watch: {
    group() {
      this.drawer = false;
    },
  },

  data: () => ({
    phone: sessionStorage.getItem("phone"),
    activeName: "first",
    borrowmanage: true,
    book_recshow: true,
    library_cardshow: false,
    borrow_show: false,
    book_feeshow: false,
    borrow_info: false,
    tablemanagestate: false,
    msgmanage: false,
    borrowData: [],
    tableData: [
      {
        date: "2016-05-02",
        name: "王小虎",
        province: "上海",
        city: "普陀区",
        address: "上海市普陀区金沙江路 1518 弄",
        zip: 200333,
        status: "红色",
      },
      {
        date: "2016-05-04",
        name: "王小虎",
        province: "上海",
        city: "普陀区",
        address: "上海市普陀区金沙江路 1517 弄",
        zip: 200333,
        status: "红色",
      },
      {
        date: "2016-05-01",
        name: "王小虎",
        province: "上海",
        city: "普陀区",
        address: "上海市普陀区金沙江路 1519 弄",
        zip: 200333,
        status: "红色",
      },
      {
        date: "2016-05-03",
        name: "王小虎",
        province: "上海",
        city: "普陀区",
        address: "上海市普陀区金沙江路 1516 弄",
        zip: 200333,
        status: "蓝色",
      },
    ],
  }),
};
</script>
  
  <style  scoped>
.left_fit {
  height: 100%;
  width: 250px;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.menu-link {
  color: #333;
  text-decoration: none;
  display: inline-block;
  padding: 0 15px;
  line-height: 60px;
  font-size: 16px;
  transition: all 0.3s ease;
}
</style>

